CollectionView এবং ListView দিয়ে ডায়নামিক ডেটা প্রদর্শন

.NET MAUI এ CollectionView এবং ListView দুটি জনপ্রিয় কন্ট্রোল, যেগুলি ডায়নামিক ডেটা প্রদর্শন করতে ব্যবহৃত হয়। এখানে আমরা শিখব কিভাবে এই দুটি কন্ট্রোল ব্যবহার করে ডায়নামিক ডেটা প্রদর্শন করা যায়।

1. ListView:

ListView হল একটি ঐতিহ্যবাহী কন্ট্রোল যা একাধিক আইটেম বা ডেটা উপস্থাপন করতে ব্যবহৃত হয়। এটি সাধারণত স্ক্রলেবল এবং সোজা লিস্ট আইটেমগুলি দেখানোর জন্য ব্যবহৃত হয়।

ListView দিয়ে ডায়নামিক ডেটা প্রদর্শন:

Steps:

1. ডেটা মডেল তৈরি করা: প্রথমে ডেটা মডেল তৈরি করতে হবে যেটি লিস্ট আইটেম হিসাবে কাজ করবে।
2. ডেটা ভিউ মডেল তৈরি করা: ডেটা লোড এবং ম্যানেজ করার জন্য ভিউ মডেল তৈরি করতে হবে।
3. ListView কন্ট্রোল ব্যবহার করা: ListView কন্ট্রোল ব্যবহার করে ডেটা প্রদর্শন করতে হবে।

উদাহরণ:

Data Model:

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

ViewModel:

public class MainPageViewModel
{
    public ObservableCollection<Person> Persons { get; set; }

    public MainPageViewModel()
    {
        Persons = new ObservableCollection<Person>
        {
            new Person { Name = "John", Age = 30 },
            new Person { Name = "Jane", Age = 25 },
            new Person { Name = "Alice", Age = 28 }
        };
    }
}

MainPage.xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MyMauiApp.MainPage">

    <ListView ItemsSource="{Binding Persons}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout>
                        <Label Text="{Binding Name}" />
                        <Label Text="{Binding Age}" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</ContentPage>

MainPage.xaml.cs:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainPageViewModel();
    }
}

এখানে, ListView এর মাধ্যমে ডেটার তালিকা দেখানো হচ্ছে, যেখানে প্রত্যেকটি Person এর নাম এবং বয়স প্রদর্শিত হবে।

2. CollectionView:

CollectionView হল একটি আধুনিক কন্ট্রোল যা আরও শক্তিশালী এবং কাস্টমাইজযোগ্য, এবং এটি বেশি কার্যকরী এবং ফ্লেক্সিবল। CollectionView সাধারণত ডেটা উপস্থাপন করতে অনেক উন্নত এবং পারফরম্যান্সের জন্য ভালো।

CollectionView দিয়ে ডায়নামিক ডেটা প্রদর্শন:

Steps:

1. ডেটা মডেল তৈরি করা: CollectionView এ ব্যবহৃত ডেটা মডেল তৈরি করতে হবে।
2. CollectionView কন্ট্রোল ব্যবহার করা: CollectionView কন্ট্রোল ব্যবহার করে ডেটা প্রদর্শন করতে হবে।

উদাহরণ:

Data Model:

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

ViewModel:

public class MainPageViewModel
{
    public ObservableCollection<Person> Persons { get; set; }

    public MainPageViewModel()
    {
        Persons = new ObservableCollection<Person>
        {
            new Person { Name = "John", Age = 30 },
            new Person { Name = "Jane", Age = 25 },
            new Person { Name = "Alice", Age = 28 }
        };
    }
}

MainPage.xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MyMauiApp.MainPage">

    <CollectionView ItemsSource="{Binding Persons}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Label Text="{Binding Name}" />
                    <Label Text="{Binding Age}" />
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

</ContentPage>

MainPage.xaml.cs:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainPageViewModel();
    }
}

এখানে, CollectionView কন্ট্রোল ব্যবহার করে Person এর নাম এবং বয়স প্রদর্শন করা হচ্ছে। CollectionView একটি আরো আধুনিক কন্ট্রোল হওয়ায় এটি বেশি কাস্টমাইজেশন এবং ফিচার অফার করে, যেমন একাধিক সেগমেন্ট, হেডার, ফ্লেক্সবক্স লেআউট ইত্যাদি।

পার্থক্য:

• ListView: এটি পুরানো এবং সহজ, তবে কাস্টমাইজেশনের জন্য কিছু সীমাবদ্ধতা রয়েছে।
• CollectionView: এটি আধুনিক এবং আরও কাস্টমাইজযোগ্য, তবে ListView এর তুলনায় একটু বেশি শক্তিশালী এবং ফিচার সমৃদ্ধ।

এতে করে, আপনি আপনার অ্যাপ্লিকেশনে যে কোন কন্ট্রোলটি ব্যবহার করবেন তা আপনার প্রয়োজন এবং প্রোজেক্টের জটিলতার উপর নির্ভর করে।